<!--数据表定义-->
<template>
  <div class="database-definition">
    <splitpanes horizontal>
      <pane size="40">
        <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
          <div slot="title">
            <div class="top-icon">
              <icon-font type="icon-shujubiao" />
            </div>
            <span>数据表定义</span>
          </div>
          <div slot="extra">
            <a-button type="primary" icon="plus" @click="databaseClick('add')" class="icon-button">新增数据表</a-button>
            <a-dropdown placement="bottomRight">
              <a-button type="primary" icon="upload">字段操作</a-button>
              <a-menu slot="overlay">
                <a-menu-item key="1" @click="fieldClick('add')"><a-icon type="plus" />字段新增</a-menu-item>
                <a-menu-divider />
                <a-menu-item key="2" @click="fieldClick('edit')"><a-icon type="edit" />字段编辑</a-menu-item>
                <a-menu-divider />
                <a-menu-item key="3" @click="fieldClick('del')"><a-icon type="delete" />字段删除</a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
          <el-table
            :data="databaseConfig.tableData"
            highlight-current-row
            border
            @row-click="rowClick"
            height="100%"
            :row-style="{height:'40px'}"
            :cell-style="{padding:'0px'}"
            :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
            style="width: 100%">
            <slot v-for="(item,index) in databaseConfig.columns">
              <el-table-column
                :key="index"
                :property="item.field"
                :label="item.title"
                :width="item.width"
                show-overflow-tooltip
                sortable>
              </el-table-column>
            </slot>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <a @click="databaseClick('edit', scope.row)">编辑</a>
                <a-divider type="vertical" />
                <a @click="databaseClick('del', scope.row)">删除</a>
              </template>
            </el-table-column>
          </el-table>
        </a-card>
      </pane>
      <pane size="60">
        <el-table
          :data="detailConfig.tableData"
          highlight-current-row
          border
          height="100%"
          :row-style="{height:'40px'}"
          :cell-style="{padding:'0px'}"
          :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="50">
          </el-table-column>
          <slot v-for="(item,index) in detailConfig.columns">
            <el-table-column
              v-if="item.field!=='IsKey' && item.field!=='IsNullable'"
              :key="index"
              :property="item.field"
              :label="item.title"
              :width="item.width"
              show-overflow-tooltip
              sortable>
            </el-table-column>
            <el-table-column
              v-if="item.field==='IsKey'"
              :key="index"
              :property="item.field"
              :label="item.title"
              :width="item.width">
              <template slot-scope="scope">
                <a-checkbox :checked="scope.row.IsKey"></a-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              v-if="item.field==='IsNullable'"
              :key="index"
              :property="item.field"
              :label="item.title"
              :width="item.width">
              <template slot-scope="scope">
                <a-checkbox :checked="scope.row.IsNullable"></a-checkbox>
              </template>
            </el-table-column>
          </slot>
        </el-table>
      </pane>
    </splitpanes>
  </div>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
export default {
  name: '',
  components: {
    Splitpanes,
    Pane
  },
  data () {
    return {
      databaseConfig: {
        tableData: [],
        columns: [
          {
            title: '英文表名',
            field: 'Name'
          },
          {
            title: '中文表名',
            field: 'CN_Name'
          },
          {
            title: '备注',
            field: 'Column_Remark'
          }
        ]
      },
      detailConfig: {
        tableData: [],
        columns: [
          {
            title: '顺序号',
            field: 'Order'
          },
          {
            title: '中文字段名',
            field: 'CN_Name'
          },
          {
            title: '英文字段名',
            field: 'Name'
          },
          {
            title: '是否是主键',
            field: 'IsKey'
          },
          {
            title: '是否允许为空',
            field: 'IsNullable'
          },
          {
            title: '字段类型',
            field: 'Type'
          },
          {
            title: '字段大小',
            field: 'Size'
          },
          {
            title: '默认值',
            field: 'Default'
          },
          {
            title: '备注',
            field: 'Column_Remark'
          }
        ]
      }
    }
  },
  created () {
    this.getTableData()
  },
  mounted () {
  },
  methods: {
    // 主表数据获取
    getTableData () {
      this.$vueAjax.get('table/get', {}).then(res => {
        console.log(res)
        const tabData = []
        res.List.forEach(item => {
          if (item.Remark) {
            const remarkStr = item.Remark.split('&')
            const tempObj = { Name: item.Name, CN_Name: remarkStr[0], Column_Remark: remarkStr[1] }
            tabData.push(tempObj)
          }
        })
        this.databaseConfig.tableData = tabData
      })
    },
    // 副表数据获取
    getTableDetailData (param) {
      this.$vueAjax.get('table/column/get', param).then(res => {
        console.log(res)
        const tabData = []
        res.List.forEach(item => {
          if (item.Remark) {
            const remarkStr = item.Remark.split('&')
            const tempObj = { Name: item.Name, CN_Name: remarkStr[0], Column_Remark: remarkStr[1], Default: item.Default, IsKey: item.IsKey, IsNullable: item.IsNullable, Order: item.Order, Size: item.Size, Type: item.Type }
            tabData.push(tempObj)
          }
        })
        this.detailConfig.tableData = tabData
      })
    },
    rowClick (row) {
      const param = { tableName: row.Name }
      this.getTableDetailData(param)
    },
    databaseClick (val) {
      switch (val) {
        case 'add':
          console.log('数据表新增')
          break
        case 'edit':
          console.log('数据表编辑')
          break
        case 'del':
          console.log('数据表删除')
          break
        default:
          break
      }
    },
    fieldClick (val) {
      switch (val) {
        case 'add':
          console.log('字段新增')
          break
        case 'edit':
          console.log('字段编辑')
          break
        case 'del':
          console.log('字段删除')
          break
        default:
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
.database-definition {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
}
</style>
